CSS篇 - 弹性布局flex

目前纯文字描述，后期补上图片说明

概念

• 主轴：main-axis，默认横向的轴
• 交叉轴：cross-axis，默认纵向的轴，有的称为侧轴，与主轴90°中心旋转交叉

弹性布局的结构

<div class="flex-container"><!-- 容器 -->
    <div class="flex-item">1</div><!-- 项目 -->
    <div class="flex-item">1</div><!-- 项目 -->
</div>

容器css

.flex-container{
    /*主轴方向： row行（横向） | row-reverse反向行 | column列（纵向） | column-reverse反向列 */
    flex-direction: row;
    /*换行：nowrap不换行 | wrap换行 | wrap-reverse反向换行（往上换行）*/
    flex-wrap: nowrap;
    /*以上两者的简写*/
    /*flex-flow: <flex-direction> || <flex-wrap>;*/

    /*
        主轴的对齐方式： 
        flex-start主轴起点对齐（横向是左对齐，纵向是上对齐）
        flex-end主轴终点对齐
        center主轴中点对齐
        space-between两端对齐
        space-around两端对齐，每个项目两侧的间隔相等并向中间靠拢
      */
    justify-content: flex-start;
    /*
        交叉轴的对齐方式：
        flex-start | flex-end | center
        baseline项目的第一行文字的基线对齐
        stretch拉长，如果项目未设置高度或设为auto，将占满整个容器的高度
    */
    align-items: stretch;
    /*
        多根轴线时交叉轴对齐方式（换行时可产生多根轴线，不换行只有一根轴线此值无效）：
        flex-start | flex-end | center
        space-between两端对齐
        space-around两端对齐，每个轴线两侧的间隔相等向中间靠拢
        stretch拉长，所有轴线占满整个容器
    */
    align-content: stretch;
}

项目css

.flex-item{
  /*排列顺序：数值越小，排列越靠前，默认为0*/
  order: 0;
  /*放大比例，与有设置该值的项按比例放大并占满空间，默认为0即如果存在剩余空间，也不放大*/
  flex-grow: 0;
  /*缩小比例，项目在主轴总宽度超出100%对当前项按比例缩小，默认为1即如果空间不足，该项目将缩小。*/
  flex-shrink: 1;
  /*
    起始值，分配多余空间前的初始长度（主轴横向时是宽度）【width/height可用的长度值，如1px/1em/1rem/auto/30%等】
    浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    */
  flex-basis: auto;
  /*以上三者的简写*/
  /*flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];*/
  /*
    语法糖解析：
    //none快捷键
    flex:none = flex:0 0 auto
    
    //数字(grow,shrink=1,basis=0)
    flex:2 = flex:2 1 0
    
    //数字，数字(grow,shrink,basis=0)
    flex:2 3 = flex:2 3 0
    
    //非数字(grow=1,shrink=1,basis)
    flex:30px = flex:1 1 30px
    flex:30% = flex:1 1 30%
    flex:auto = flex:1 1 auto
    
    //数字，非数字(grow,shrink=1,basis)
    flex:2 30px = flex:2 1 30px
    flex:2 30% = flex:2 1 30%
    flex:2 auto = flex:2 1 auto
    
    //数字，数字，非数字(grow,shrink,basis)
    flex:2 3 30px
    flex:2 3 30%
    flex:2 3 auto
  */

  /*
    自身对齐方式：auto | flex-start | flex-end | center | baseline | stretch
    默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  */
  align-self: auto;
}